/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-form-item {
    margin: var(--pure-form-item-margin);
    padding: var(--pure-form-item-padding, 8px 0);
    border: var(--pure-form-item-border-width, 0) var(--pure-form-item-border-style, solid) var(--pure-form-item-border-color, var(--pure-border-color-gary));
    border-radius: var(--pure-form-item-border-radius);

    &__body {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--pure-form-item-gap);
    }

    &__left {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
        gap: var(--pure-form-item-left-gap, 2px);
        width: var(--pure-form-item-left-width);
        position: relative;

        &--placeholder {
            height: 0;
            overflow: hidden;
        }
    }

    &__required {
        font-size: var(--pure-form-item-required-font-size);
        color: var(--pure-form-item-required-color, #ff0000);
        position: var(--pure-form-item-required-position);
        left: var(--pure-form-item-required-left);
        top: var(--pure-form-item-required-top);
        right: var(--pure-form-item-required-right);
        bottom: var(--pure-form-item-required-bottom);
        z-index: var(--pure-form-item-required-z-index, 2);
        margin: var(--pure-form-item-required-margin);
        padding: var(--pure-form-item-required-padding);
        order: var(--pure-form-item-required-order);
    }

    &__icon {
        font-size: var(--pure-form-item-icon-font-size, var(--pure-font-size-larger));
        color: var(--pure-form-item-icon-color);
        margin: var(--pure-form-item-icon-margin);
        padding: var(--pure-form-item-icon-padding);
    }

    &__label {
        font-size: var(--pure-form-item-label-font-size);
        color: var(--pure-form-item-label-color);
        margin: var(--pure-form-item-label-margin);
        padding: var(--pure-form-item-label-padding);
        width: var(--pure-form-item-label-width);
    }

    &__main {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 1;
        text-align: var(--pure-form-item-main-text-align);
    }

    &__content {
        flex: 1;
        margin: var(--pure-form-item-content-margin);
        padding: var(--pure-form-item-content-padding, 0 5px);
    }

    &__right {
        flex-shrink: 0;
    }

    &__arrow {
        font-size: var(--pure-form-item-arrow-font-size);
        color: var(--pure-form-item-arrow-color);
        margin: var(--pure-form-item-arrow-margin);
        padding: var(--pure-form-item-arrow-padding);
        transform: rotate(var(--pure-form-item-arrow-rotate), 0deg);
        transition: var(--pure-form-item-arrow-transition, transform 0.3s);
    }

    &__footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--pure-form-item-gap);
        margin: var(--pure-form-item-footer-margin, 5px 0 0 0);
    }

    &__tips {
        font-size: var(--pure-form-item-tips-font-size, var(--pure-font-size-smaller));
        color: var(--pure-form-item-tips-color, var(--pure-theme-danger));
        margin: var(--pure-form-item-tips-margin, var(--pure-form-item-content-margin));
        padding: var(--pure-form-item-tips-padding, var(--pure-form-item-content-padding, 0 5px));
        text-align: var(--pure-form-item-tips-text-align, var(--pure-form-item-main-text-align));
    }

    &--error {
        border-color: var(--pure-form-item-error-border-color, var(--pure-theme-danger));

        &--border-all {
            border-width: var(--pure-form-item-error-border-width, 1px);
        }

        &--border-bottom {
            border-bottom-width: var(--pure-form-item-error-border-width, 1px);
        }
    }

    &__label-position {
        &__top {
            .pure-form-item__body {
                flex-direction: column;
                align-items: stretch;
                gap: var(--pure-form-item-gap, 8px);
            }

            .pure-form-item__content {
                padding: var(--pure-form-item-content-padding, 0);
            }

            .pure-form-item__left--placeholder {
                display: none;
            }
        }

        &__start {
            .pure-form-item__body {
                align-items: flex-start;
            }

            .pure-form-item__left {
                margin: var(--pure-form-item-margin, 0.5em 0);
            }
        }
    }
}